<template>
  <!-- 住院病人管理 -->
  <div id="app">
    <!-- 设置顶部导航栏 -->
    <mt-header title="住 院 病 人 管 理">
      <mt-button icon="back" @click="goBack" slot="left">返回</mt-button>
      <mt-button slot="right" @click="goHome">
        <img
          src="../../assets/images/home.png"
          height="20"
          width="20"
          slot="icon"
          style="margin-top: 5px"
        />
      </mt-button>
    </mt-header>

    <!-- 内容区域 -->
    <div class="content">
      <p style="text-align: center">当前的是编号为{{ id }}的病人</p>
      <div class="details">
        <div class="portrait">
          <img src="../../assets/images/touxiang.webp" alt="" />
        </div>
        <div class="information">
          <p>姓名：{{ patient.name }}</p>
          <p>年龄：{{ patient.age }}</p>
          <p>联系方式：{{ patient.phone }}</p>
          <p>主治医生：{{ patient.doctor }}</p>
          <p>所在病房：{{ patient.department }}</p>
        </div>
      </div>
      <div class="Illness">
        <p class="illTitle">进院时间</p>
        <p class="illInner ItemCenter">{{ patient.createTime }}</p>
      </div>
      <div class="Illness">
        <p class="illTitle">病情描述</p>
        <p class="illInner ItemCenter">{{ patient.description }}</p>
      </div>
      <div class="Illness">
        <p class="illTitle">开药记录</p>
        <div
          class="ItemCenter"
          v-for="(item, index) in medication"
          :key="index"
        >
          <span>{{ item.createTime }}:</span>
          <span class="illInner ItemCenter">
            &nbsp; &nbsp; &nbsp;
            {{ item.medication }}
          </span>
        </div>
      </div>
      <!-- <van-button type="primary " block @click="showPopup"
        >新开处方药</van-button
      > -->
      <!-- <div class="cicleAll">
        <div class="circle">
          <van-circle
            v-model="patient.currentRate1"
            rate="patient.currentRate1"
            :stroke-width="60"
            layer-color="#ebedf0"
            text="病情状态"
          />
          <p>{{ patient.currentRate1S }}%</p>
        </div>
        <div class="circle">
          <van-circle
            v-model="patient.currentRate2"
            rate="patient.currentRate2"
            :stroke-width="60"
            color="#07c160"
            text="治疗进度"
          />
          <p>{{ patient.currentRate2S }}%</p>
        </div>
      </div> -->

      <van-button class="chuyuan" type="primary" block @click="goCharge"
        >办 理 出 院</van-button
      >
      <van-button class="chuyuan" type="primary" block @click="goPrescribe(patient.id)"
        >病人开药</van-button
      >
    </div>
  </div>
</template>

<script>
import { Dialog, Toast } from "vant";
export default {
  name: "patientmore",

  data() {
    return {
      id: "", //上一页面url传递的id数据
      idcard:'',//病人身份证
      //后续将接口到的数据绑定到此对象属性中
      checkDrug: [],
      patient: {},
      //开药记录
      medication: [],
    };
  },
  created() {
    //页面一进来先获取url上面的id,再调用接口获取当前病人的详细信息
    this.id = this.$route.query.id;
    window.localStorage.setItem("hospitalizationId", this.id);
    this.getPatientMsg(this.id);
  },

  mounted() {},

  methods: {
    //获取病人详细信息
    getPatientMsg(id) {
      this.$http.get("hospitalization-register/" + id, {}).then((res) => {
        console.log(res);
        this.patient = res.data.data;
        this.getDrugRecord(res.data.data.idcard);
        this.medicationLog(res.data.data.idcard);
        this.idcard = res.data.data.idcard;
      });
      console.log("当前获取" + id + "号病人的信息");
    },
    //获取用药记录
    getDrugRecord(id) {
      this.$http.get("medication-log/" + id, {}).then((res) => {
        // console.log(res);
        if (res.data.data == null) {
          this.PrescriptionRecord = "暂无";
        } else {
          this.PrescriptionRecord = res.data.data;
        }
      });
    },

    //出院按钮点击
    goCharge() {
      Dialog.alert({
        title: "提示",
        message:
          "确认当前病人各项指标已到达正常标准，办理出院",
        showCancelButton: true,
        confirmButtonColor: "#07c160",
        cancelButtonColor: "#ff976a",
      })
        .then(() => {
          this.confirmGo(this.patient.id);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //调用出院接口
    confirmGo(id) {
      /* this.$router.push({
        path: "./SettlementCost",
        query: { id },
      }); */
      console.log(id);
      this.$http
        .delete("hospitalization-register/out/" + id, {})
        .then((res) => {
          console.log(res);
          if (res.data.code == 500) {
            Toast(res.data.message);
          } else {
            Toast("办理成功");
            setTimeout(() => {
              this.$router.push({
                path: "./PatientManagement",
              });
            }, 800);
          }
        });
    },
    //病人开药按钮
    goPrescribe(id) {
      this.$router.push({
        path: "./Prescribe",
        query: {
          id: id,
        },
      });
    },
    //开药记录获取
    medicationLog(id) {
      this.$http.get("medication-log/card/" + id, {}).then((res) => {
        this.medication = res.data.data;
        //console.log(this.medication);
      });
    },
    goBack() {
      this.$router.push({
        path: "./PatientManagement",
      });
    },
    goHome() {
      this.$router.push({
        path: "./index",
      });
    },
  },
};
</script>

<style lang="less" scoped>
#app /deep/ .mint-header-title {
  overflow: initial;
}
.details {
  display: flex;
  align-items: center;
  .portrait {
    width: 120px;
    height: 120px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .information {
    padding-left: 20px;
    p {
      padding: 5px 0;
    }
  }
}
.Illness {
  padding-top: 20px;
  .ItemCenter {
    text-align: center;
  }
  .illTitle {
    text-align: center;
    font-weight: 600;
    font-size: 20px;
  }
  .illInner {
    padding-top: 5px;
  }
  .center {
    padding-top: 20px;
    text-align: center;
  }
}
.content .lastNess {
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
}
.van-picker /deep/ .van-picker__columns {
  height: 0 !important;
}
.van-checkbox {
  justify-content: center;
}
.van-button {
  margin: 20px 0;
}
.chuyuan {
  margin-bottom: 0;
}
.cicleAll {
  display: flex;
  .circle {
    width: 50%;
    text-align: center;
  }
}
</style>